<template>
  <div class="my-userList">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="van-clearfix">
        <ul>
          <li v-for="(item, index) in userList" :key="index">
            <van-swipe-cell>
              <van-cell
                :border="false"
                :title="`${item.nickname}   ${item.loginName}`"
                is-link
                :to="`/userInfo/detail/${item.id}`"
              />
              <template #right>
                <van-button square type="danger" text="删除" @click="delUser(item)" />
                <van-button square type="info" text="编辑" @click="modifyUser(item)" />
              </template>
            </van-swipe-cell>
          </li>
        </ul>
        <div class="van-list__placeholder"></div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { queryPageUsers, delUser } from "@/api/userInfo";
import { Dialog, Toast } from "vant";

export default {
  name: "PopupLeft",
  data() {
    return {
      value: '',
      userList: [],
      loading: false,
      finished: false,
      pageTotal: 0,
      userSearch:{
        page: 1,
        pageSize: 20,
        filters: null,
        sorts: null
      }
    };
  },
  methods: {
    onLoad() {
      console.info(this.userList.length)
      console.info(this.pageTotal)
      console.info(this.finished)
      console.info("onload-----------------");
      queryPageUsers({
        page: this.userSearch.page,
        pageSize: this.userSearch.pageSize,
        filters: this.userSearch.filters,
        sorts: this.userSearch.sorts
      }).then((result = {}) => {
        if (this.userList.length < 1) {
          this.userList = result.list;
        } else {
          this.userList = this.userList.concat(result.list);
        }
        this.userSearch.page++;
        this.loading = false;
        this.finished = false;
        this.pageTotal = result.total;
        if (this.userList.length >= this.pageTotal) {
          this.loading = false;
          this.finished = true;
        }
      });
    },
    // 删除用户信息
    delUser(item) {
      Dialog.confirm({
        title: "删除",
        message: `是否确认删除用户${item.nickname}`
      }).then(() => {
        delUser([item.id]).then(data => {
          Toast.success("删除成功");
          // 可以通过watch userList来动态更新?
          this.getUserList();
        });
      });
    },
    modifyUser(item) {
      this.$router.push({
        name: "UserModify",
        params: { id: item.id }
      });
    },
    onSearch(val) {
      this.userSearch.page = 1
      this.userList = []
      this.userSearch.filters = {}
      this.userSearch.filters['loginName'] = val
      this.onLoad();
    },
    onCancel() {
      this.userSearch.page = 1
      this.userList = []
      this.userSearch.filters = null
      this.onLoad();
    },
  }
};
</script>
